.mega-dialog.ob-promo-dialog {
    width: 720px;
    border-radius: 8px;
}

.mega-dialog.dialog-template-graphic.ob-promo-dialog header .graphic.img-ob-promo-dialog {
    background-image: url("../../images/mega/promo/new_nav_promo_image_light@2x.png");
    background-size: 720px 320px;
    background-repeat: no-repeat;
    background-position: 50% bottom;
    background-color: var(--mobile-surface-1);
    height: 320px !important;
    width: 100%;
    margin-bottom: 24px !important;
    padding-top: 24px;
}
body.theme-dark .mega-dialog.dialog-template-graphic.ob-promo-dialog header .graphic.img-ob-promo-dialog {
    background-image: url("../../images/mega/promo/new_nav_promo_image_dark@2x.png");
}

.mega-dialog.ob-promo-dialog.dialog-template-graphic > header {
    padding: 0 0 4px;
    overflow: hidden;
    border-radius: 8px;
}

.mega-dialog.ob-promo-dialog.dialog-template-graphic > header h2 {
    font: var(--text-h2-bold);
    padding: 0 40px;
    text-align: start;
}

.mega-dialog.ob-promo-dialog.dialog-template-graphic > header .graphic {
    margin: 0 auto 12px;
}

.mega-dialog.ob-promo-dialog > section {
    margin-bottom: 8px;
}

.mega-dialog.ob-promo-dialog > section a {
    text-decoration: underline;
}

.mega-dialog.ob-promo-dialog > section .content-block {
    padding: 0 40px;
    text-align: start;
}

.mega-dialog.ob-promo-dialog > footer aside {
    padding: 16px 40px 24px;
    background: unset;
    text-align: end;
}

.mega-dialog.ob-promo-dialog > footer > aside > button {
    padding: 8px 12px;
}

.mega-dialog.ob-promo-dialog > footer aside button span {
    font: var(--text-body1);
}
